<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 30822
  Date: 2023/6/9
  Time: 8:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <link href="${pageContext.request.contextPath}/WEB-INF/css/styles.css"  rel="stylesheet"/>
    <link href="${pageContext.request.contextPath}/layui-v2.8.4/layui/css/layui.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"></script>
    <script src="${pageContext.request.contextPath}/layui-v2.8.4/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
    <script>
        function Out(){
            window.location.href="${pageContext.request.contextPath}/user/logout";
        }
        function toUserInfo(url){

            $("#main").load(url);
        }
        function toUserClass(url){

            $("#main").load(url);
        }
        function toMyClass(url){

            $("#main").load(url);
        }
    </script>

</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">健身房管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img src="https://unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                    ${sessionScope.userInfo.userName}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:Out();">Sign out</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;" > 个人信息</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:toUserInfo('${pageContext.request.contextPath}/user/ToUserInfo');">个人信息</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">课程管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:toUserClass('${pageContext.request.contextPath}/class/ToUserClass');" id="cclass">报名选课</a></dd>
                        <dd><a href="javascript:toMyClass('${pageContext.request.contextPath}/class/ToMyClass');">我的课程</a></dd>

                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">会员信息</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">会员信息</a></dd>
                    </dl>
                </li>

            </ul>
        </div>
    </div>
<%--    class="layui-body"--%>
    <div class="layui-body" id="main">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
<%--            <blockquote class="layui-elem-quote layui-text" style="font-size: 45px">--%>
<%--                ${sessionScope.userInfo.userName}的主页--%>
<%--            </blockquote>--%>
<%--           class= "container-fluid px-4"--%>
            <div  class= "container-fluid px-4" style="width: 1000px;height:200px ">
                <h1 class="mt-4">报名选课</h1>



                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item"><a th:href="@{/toUserMain}">主页</a></li>
                    <li class="breadcrumb-item active">报名选课</li>
                </ol>
                <%--    action="${pageContext.request.contextPath}/class/ToUserClass"--%>
                <form action="${pageContext.request.contextPath}/class/ToUserClass" method="post" id="#myForm">
                    <div style="display: flex;justify-content: flex-end">
                        <div class="layui-form">
                            <input type="text" name="className" placeholder="请输入课程名" class="layui-input" style="margin-right: 0px;width: 100px">
                            <hr class="ws-space-16">
                        </div>
                        <input type="submit" class="layui-btn" style="margin-left: 20px" value="搜索" id="#submitBtn">
                    </div>
                </form>

                <div>
                    <div class="card-header">
                        <i class="fas fa-table me-1"></i>
                        课程信息表
<%--                        <span style="color: red;margin-left: 99px; text-align: center" >${requestScope.msg}测试</span>--%>
                    </div>
                    <table class="layui-hide" id="ID-table-demo-data"></table>
                    <script type="text/html" id="barDemo">
<%--                        <div class="layui-clear-space">--%>
                            <a class="layui-btn layui-btn-xs" lay-event="edit">选课</a>
<%--                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">选课</a>--%>
<%--                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>--%>
<%--                        </div>--%>
                    </script>
<%--                    <table class="layui-hide" id="ID-table-demo-page"></table>--%>
<%--                    <table class="layui-hide" id="ID-table-demo-setRowChecked"></table>--%>
                </div>
            <br><br>
        </div>
    </div>
</div>



    <script>
        layui.use('table', function(){
            var table = layui.table;
            let data = getData();
            <%--//通过 Ajax 获取表格数据--%>
            <%-- $.ajax({--%>
            <%--    url: '${pageContext.request.contextPath}/class/ToUserClassData',--%>
            <%--     type: 'GET',--%>
            <%--     dataType: 'json',--%>
            <%--     success: function(data){--%>
                    //将数据传递给 layui.table.render() 方法，生成表格数据
                       table.render({
                        elem: '#ID-table-demo-data',
                        data: data,
                        page:true,
                        cols: [[
                            {field: 'id', title: '编号', width: 80}
                            ,{field: 'className', title: '名称', width: 120}
                            ,{field: 'classBegin', title: '时间', minWidth: 160,sort: true}
                            ,{field: 'classTime', title: '时长', width: 80,sort: true}
                            ,{field: 'classCoach', title: '教练', width: 100}
                            ,{field: 'classHour', title: '课时', width: 100}
                            ,   {
                                title: '操作',
                                toolbar: '#barDemo',
                                width:80
                            }
                        ]]
                        //,skin: 'line' // 表格风格
                        //,even: true
                        ,page: true // 是否显示分页
                        ,limits: [3, 5, 10]
                        ,limit: 5 // 每页默认显示的数量
                    });
        });


        layui.use('table', function(){
            var table = layui.table;
            table.on('tool(ID-table-demo-data)', function(obj) {
                let data = obj.data; //当前行的数据对象
                let id = data.id; //获取当前行的id值
                // let msg= getMsg();
                // let code= getCode();
                if (obj.event === 'edit') { //删除

                    layer.confirm('确定选择此课程吗?', function (index) {
                        console.log("rowId" + id)

                        $.ajax({
                            type: 'POST',
                            // dataType: 'json',
                            url:'${pageContext.request.contextPath}/class/AddChoose',
                            data:{id},
                            async:false,
                            success:function (result){
                                if(result.code==200){

                                    layer.msg('选课成功', {icon: 1});
                                }
                                if(result.code==100){

                                    layer.msg('您已经选择了此课程', {icon: 2});
                                }
                                if(result.code==300){

                                    layer.msg('您当前不是会员', {icon: 2});
                                }
                                if(result.code==400){

                                    layer.msg('课时不够请充值', {icon: 2});
                                }
                                // else{
                                //     layer.msg('ce', {icon: 2});
                                // }
                                // }
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                console.log(textStatus, errorThrown);
                                layer.msg('选课失败', {icon: 2});
                            }
                        })
                        // obj.del(); //删除对应行
                        layer.close(index);
                    });
                }
                <%--else if (obj.event === 'edit') { //编辑--%>

                <%--    window.location.href="${pageContext.request.contextPath}/order/declare?id="+id--%>
                <%--}--%>
            })
        });

        function getData() {
            let jsonData;
            jsonData = ${requestScope.courseList}
            return jsonData;
        }

        <%--function getCode(){--%>
        <%--    let jsonData;--%>
        <%--    jsonData = ${requestScope.code}--%>
        <%--    return jsonData;--%>
        <%--}--%>

        <%--function getMsg(){--%>
        <%--        let jsonData;--%>
        <%--        jsonData = ${requestScope.msg}--%>
        <%--        return jsonData;--%>
        <%--    }--%>




        <%--$(function() {--%>
        <%--    $('#submitBtn').click(function(event) {--%>
        <%--          event.preventDefault();--%>
        <%--            var form = $('#myForm')[0];--%>
        <%--            var formData = new FormData(form);--%>
        <%--            $.ajax({--%>
        <%--                type: 'POST',--%>
        <%--                url: '${pageContext.request.contextPath}/class/ToUserClassData',--%>
        <%--                data: formData,--%>
        <%--                processData: false,--%>
        <%--                contentType: false,--%>
        <%--                success: function(data) {--%>
        <%--                    alert('成功');--%>
        <%--                    // 返回新界面的 URL--%>
        <%--                    $('#cclass').trigger('click');--%>
        <%--                    $('#cclass').click(function() {--%>
        <%--                        // 修改浏览器地址，实现自动跳转--%>
        <%--                        window.location.href = $('#cclass').attr('href');--%>
        <%--                    });--%>
        <%--                }--%>
        <%--            });--%>

        <%--    });--%>
        <%--});--%>
        // $('#userInfo').trigger('click');
        // $('#userInfo').click(function() {
        //     // 修改浏览器地址，实现自动跳转
        //     window.location.href = $('#userInfo').attr('href');
        // });
    </script>
    <script src="${pageContext.request.contextPath}/layui-v2.8.4/layui/layui.js"></script>

<%--                <c:otherwise>--%>



</body>
</html>
